<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-title">健康监测中心</text>
    </view>

    <!-- 主体内容：等距布局的监测模块 -->
    <view class="main-content">
      <!-- 左侧：监测设备区 -->
      <view class="module left-module">
        <view class="monitor-device">
          <view class="device-body">
            <view class="device-screen">
              <view class="vital-signs">
                <view class="sign-item" v-for="(item, index) in vitalSigns" :key="index">
                  <text class="sign-label">{{ item.label }}</text>
                  <text class="sign-value">{{ item.value }}</text>
                  <text class="sign-unit">{{ item.unit }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="sensor-module">
          <view class="sensor-item" v-for="(item, index) in sensors" :key="index">
            <view class="sensor-icon" :class="item.iconClass"></view>
            <text class="sensor-name">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 中间：历史数据与趋势区 -->
      <view class="module center-module">
        <view class="chart-container">
          <text class="chart-title">健康数据趋势</text>
          <view class="chart-placeholder">
            <!-- 这里可替换为实际图表组件，如uCharts -->
            <text class="chart-loading">加载中...</text>
          </view>
        </view>
        <view class="history-data">
          <text class="history-title">历史记录</text>
          <view class="history-item" v-for="(item, index) in historyRecords" :key="index">
            <text class="record-time">{{ item.time }}</text>
            <text class="record-value">{{ item.value }}</text>
          </view>
        </view>
      </view>

      <!-- 右侧：健康建议与操作区 -->
      <view class="module right-module">
        <view class="health-tips">
          <text class="tips-title">健康建议</text>
          <text class="tips-content">{{ healthTips }}</text>
        </view>
        <view class="action-buttons">
          <view 
            class="action-btn" 
            v-for="(item, index) in actionButtons" 
            :key="index"
            @click="handleAction(item)"
          >
            <text class="btn-text">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 生命体征数据
const vitalSigns = ref([
  { label: '心率', value: '72', unit: '次/分' },
  { label: '血氧', value: '98', unit: '%' },
  { label: '血压', value: '120/80', unit: 'mmHg' },
  { label: '体温', value: '36.5', unit: '℃' }
]);

// 传感器数据
const sensors = ref([
  { name: '心率传感器', iconClass: 'icon-heart' },
  { name: '血氧传感器', iconClass: 'icon-oxygen' },
  { name: '血压传感器', iconClass: 'icon-blood' },
  { name: '体温传感器', iconClass: 'icon-temperature' }
]);

// 历史记录
const historyRecords = ref([
  { time: '08:00', value: '心率: 70 次/分' },
  { time: '12:00', value: '血氧: 97%' },
  { time: '18:00', value: '血压: 122/82 mmHg' }
]);

// 健康建议
const healthTips = ref('您的各项健康指标均在正常范围内，继续保持良好的生活习惯，注意规律作息与适度运动。');

// 操作按钮
const actionButtons = ref([
  { name: '开始监测', action: 'start' },
  { name: '导出报告', action: 'export' },
  { name: '健康分析', action: 'analyze' },
  { name: '设置', action: 'settings' }
]);

// 模拟实时监测（实际需对接硬件或后端）
onMounted(() => {
  setInterval(() => {
    vitalSigns.value[0].value = (Math.floor(Math.random() * 10) + 65).toString();
  }, 5000);
});

// 操作按钮点击事件
const handleAction = (item) => {
  let toastMsg = '';
  switch (item.action) {
    case 'start':
      toastMsg = '开始健康监测';
      break;
    case 'export':
      toastMsg = '导出健康报告';
      break;
    case 'analyze':
      toastMsg = '生成健康分析';
      break;
    case 'settings':
      toastMsg = '进入设置页面';
      break;
  }
  uni.showToast({
    title: toastMsg,
    icon: 'none'
  });
};
</script>

<style scoped>
/* 全局容器：等距视角背景 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 121px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
  /* flex-direction: column; */
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
}

/* 主体内容布局 */
.main-content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  
}

.left-module, .right-module {
  width: 89%;
margin-bottom: 20px;
}

.center-module {
  width: 89%;
}

/* 左侧：监测设备区 */
.monitor-device {
  margin-bottom: 20px;
}

.device-body {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 15px;
}

.device-screen {
  background-color: #ffffff;
  border-radius: 6px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vital-signs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 0 20px;
}

.sign-item {
  text-align: center;
}

.sign-label {
  font-size: 14px;
  color: #6b7fd7;
  display: block;
  margin-bottom: 5px;
}

.sign-value {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
}

.sign-unit {
  font-size: 14px;
  color: #888888;
}

.sensor-module {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.sensor-item {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sensor-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
  background-color: #ffffff;
}

.icon-heart {
  /* background: url('@/static/icons/heart.png') no-repeat center; */
  /* background-size: 24px; */
}

.icon-oxygen {
  /* background-size: 24px; */
  /* background: url('@/static/icons/oxygen.png') no-repeat center; */
}

.icon-blood {
  /* background: url('@/static/icons/blood.png') no-repeat center; */
  /* background-size: 24px; */
}

.icon-temperature {
  /* background: url('@/static/icons/temperature.png') no-repeat center; */
  /* background-size: 24px; */
}

.sensor-name {
  color: #ffffff;
  font-size: 14px;
}

/* 中间：历史数据与趋势区 */
.chart-container, .history-data {
  margin-bottom: 20px;
}

.chart-title, .history-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 10px;
  display: block;
}

.chart-placeholder {
  background-color: #f0f2fa;
  border-radius: 6px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-loading {
  color: #888888;
}

.history-item {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.record-time {
  color: #6b7fd7;
}

.record-value {
  color: #333333;
}

/* 右侧：健康建议与操作区 */
.health-tips {
  margin-bottom: 20px;
}

.tips-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 10px;
  display: block;
}

.tips-content {
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.action-btn {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.btn-text {
  color: #ffffff;
  font-size: 16px;
}
</style>